<!--个人中心页面-->
<!--头像上传组件先暂时不做,等其它做完再来做这个-->
<template>
  <el-form label-width="100px" style="width: 500px;">
    <el-form-item label="头像">
      <!--头像上传的html代码是从Element-Plus官网的"Form表单组件"=>"Upload上传"处复制的-->
      <!--头像上传开始 action设置上传地址 limit="1"限制上传数量为1 name="file"设置上传参数名称,服务器就需要使用相同的名称-->

<!--      action="http://localhost:8080/yyt/file/upload"-->
      <el-upload
          v-model:file-list="fileList"
          action="http://localhost:8080/yyt/file/upload"
          limit="1"
          name="file"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :with-credentials='true'
      >
        <el-icon><Plus /></el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
      <!--头像上传结束-->
    </el-form-item>
    <el-form-item label="用户名">
      <!--给用户名输入框设置了禁用(只能看不能改),所以使用属性绑定就可以不用设置双向绑定-->
      <el-input placeholder="请输入用户名" :value="user.username" disabled></el-input>
    </el-form-item>
    <el-form-item label="新昵称">
      <el-input placeholder="请输入新昵称" v-model="newUser.nickname"></el-input>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input placeholder="请输入新邮箱" v-model="newUser.email"></el-input>
    </el-form-item>
    <el-form-item label="电话">
      <el-input placeholder="请输入新电话" v-model="newUser.phone"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input placeholder="请输入新年龄" v-model="newUser.age"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-input placeholder="请输入新性别" v-model="newUser.gender"></el-input>
    </el-form-item>
<!--    <el-form-item label="旧密码">-->
<!--&lt;!&ndash;      &lt;!&ndash;给用户名输入框设置了禁用(只能看不能改),所以使用属性绑定就可以不用设置双向绑定&ndash;&gt;&ndash;&gt;-->
<!--    <el-input placeholder="请输入原密码" :value="user.password" disabled></el-input>-->
<!--   </el-form-item>-->
    <el-form-item label="旧密码" style="display: flex; align-items: center;">
      <div style="flex: 1;">
        <el-input placeholder="请输入旧密码" v-model="oldPassword"></el-input>
      </div>
      <div style="margin-left: 10px;">
        <el-button type="primary" @click="confirmPassword()" style="background-color: #42b983;border: #42b983">验证密码</el-button>
      </div>
    </el-form-item>
    <el-form-item label="新密码">
      <el-input placeholder="请输入新密码" v-model="newUser.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="save()">保存修改</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
//头像上传的JS代码是从Element-Plus官网的"Form表单组件"=>"Upload上传"处复制的,复制script标签中所有的代码到此处
//lang="ts"表示此段代码是用TypeScript代码写的,TS是基于JS代码衍生出来的,所以我们需要改造下下面的代码
//这部分代码涉及到与后端交互，向服务器发请求并上传图片的相关内容,目前我们先不展开细讲,只要目前页面上有显示出来加号就可以
import {onMounted, ref} from 'vue'
import { Plus } from '@element-plus/icons-vue'
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

//1.获取用户数据
const user = ref(getUser());

onMounted(()=>{
  console.log(user.value.username)
})



//定义接收旧密码数据
const oldPassword = ref('')
let comparedPassword = user.value.password;
//识别旧密码是否正确方法
const confirmPassword = () => {
   console.log('获取到本地数据：comparedPassword',comparedPassword)
  if(oldPassword.value === ''){
    alert('旧密码不能为空')
    return;
  }else {
    if (comparedPassword !== oldPassword.value){
      alert("密码错误，请重试")
      return;
    }else{
      alert("旧密码正确!")
    }
  }
}
//定义接收新密码数据
const newUser = ref({
  id:user.value.id,
  username:user.value.username,
  imgUrl:user.value.imgUrl,
  nickname:user.value.nickname,
  password:'',
  email:user.value.email,
  phone:user.value.phone,
  age:user.value.age,
  gender:user.value.gender
});

//2.实现保存方法
//保存方法需要验证密码才能修改
const save = ()=>{
  //TODO 识别原密码是否正确
  if(oldPassword.value === '' || comparedPassword !== oldPassword.value){
    alert('请先验证密码');
    return;
  }else if(oldPassword.value === newUser.value.password){
    alert('密码不能与原密码相同')
    return;
  }
  //先暂时不管修改头像的事，后面写，
  //将新密码赋值给密码key传到后端
  //2.获取图片路径
//判断是否上传图片
  if (fileList.value.length > 0){//说明用户传图片了
    let imgUrls = [];//准备数组,用来存多张图片路径
    for (let file of fileList.value){//遍历响应式数组
      //依次遍历得到每个文件的响应路径
      let imgUrl = file.response.data;
      //每得到一个路径,就存入imgUrls数组中
      imgUrls.push(imgUrl);
      // /2024/05/17/2aee3eff-4f2b-42cf-bb12-db992d56378b.png,/2024/05/17/03229ac5-c83b-4a30-ac08-69dc532410d1.jpg
    }
    //循环结束,得到所有的图片路径,将路径赋值给weibo对象,一起发给后端新增微博
    newUser.value.imgUrl = imgUrls.toString();
  }
  let data = qs.stringify(newUser.value);

  //改为密码路径 已经实现nickname和password修改
  axios.post(BASE_URL+'/yyt/user/updateUser',data).then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success('修改完成!');
      //注意:修改完成后要更新localStorage里面的数据
      localStorage.user = JSON.stringify(newUser.value);
      router.push('/scene')
      window.location.reload(true);
    }else {
      ElMessage.error('修改失败')
    }
  })

}


// 图片上传相关代码
const fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);

//实现图片手动移除
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL+'/yyt/file/remove?imgUrl='+imgUrl)
      .then((response)=>{
        if (response.data.code==2002){
          ElMessage.success('删除成功!');
        }
      })
}
// 实现图片预览
// let uploadFile = fileList.value;
const handlePictureCardPreview = (uploadFile) => {
  dialogVisible.value = true;
  dialogImageUrl.value = uploadFile.url
}



</script>

<style scoped>

</style>